<!DOCTYPE html>
<html lang="cn" translate="no">
<head>
    <meta charset="UTF-8" />
    <meta name="google" content="notranslate">
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>场景编辑器示例</title>
    <style>
        .editor3d {
            position: relative;
            z-index: 1;
            font-size: 12px;
            width: 100vw;
            height: 100vh;
        }

        .container {
            width: 100%;
            height: 100%;
        }

        .btns {
            width: 160px;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 1;
            backdrop-filter: blur(9px);
            overflow-y: auto;
            color: #ffffff;
        }

        .btns::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            background-color: rgba(0, 0, 0, 0);
        }

        .btns::-webkit-scrollbar-track {
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
            border-radius: 10px;
            background-color: rgba(0, 0, 0, 0);
        }

        .btns::-webkit-scrollbar-thumb {
            border-radius: 10px;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #1890ff;
        }

        .btns div {
            margin: 4px 0px;
        }

        .btns button {
            pointer-events: all;
            display: block;
            margin: 2px;
            cursor: pointer;
        }

        .btns button:hover {
            border-color: #ff0000;
        }
    </style>
</head>
<body>
    <div id="editor3d"></div>

    <div class="btns">

        基本单位(米/m)

        <button onclick="saveCameraParam()">获取当前相机</button>
        <button onclick="setCameraParam()">飞到相机位置</button>
        <br>
        <div>
            <button onclick="add_groundUrl()">添加地面模型</button>
            <br>
            <button onclick="init_floor()">初始楼层</button>
            <button onclick="select_floor()">选中楼层</button>
            <button onclick="no_select_floor()">取消选中楼层</button>
            <button onclick="in_floor()">进入楼层</button>
            <button onclick="no_in_floor()">不进入楼层</button>
            <button onclick="add_floor('./data/floor_1-4.glb')">添加楼层1-4模型</button>
            <button onclick="add_floor('./data/floor_5.glb')">添加楼层5模型</button>
            <button onclick="add_floor('./data/floor_6.glb')">添加楼层6模型</button>
            <button onclick="add_floor('./data/floor_7.glb')">添加楼层7模型</button>
            <button onclick="add_floor('./data/floor_8-10.glb')">添加楼层8-10模型</button>
            <button onclick="move_floor()">移动楼层模型</button>
            <button onclick="del_active_floor()">删除选中楼层模型</button>
            <button onclick="get_floor_data()">获取楼层数据</button>
            <br>
            <button onclick="checklicense()">验证许可</button>
            <button id="" onclick="addModelsDemo()">批量添加模型</button>
            <button id="" onclick="addChair()">添加模型：椅子</button>
            <button id="" onclick="addTree()">添加模型：树</button>
            <button id="" onclick="addDesk()">添加模型：桌子</button>
            <button id="" onclick="addCameraModel()">添加模型：球机</button>
            <button id="" onclick="addAlarmModel()">添加模型：告警</button>
            <button id="" onclick="getModelData()">获取全部模型数据</button>
            <button id="" onclick="getModelDataById()">根据id获取模型数据</button>
            <button id="" onclick="updateModelData()">更新模型位置</button>
            <button id="" onclick="deleteModelById()">根据id删除模型</button>
            <button id="" onclick="selectModel()">选中模型</button>
            <button id="" onclick="unselectModel()">取消选中模型</button>
            <br>
            <button onclick="addLabel()">添加标签文本</button>
            <button onclick="loadLabels()">加载标签列表</button>
            <button onclick="moveLabel('1', 10)">移动标签文本</button>
            <button onclick="deleteLabel()">删除标签文本</button>
            <button onclick="editor3DStore.setLookLabelId('1')">选中标签文本</button>
            <button onclick="editor3DStore.setLookLabelId('')">取消选中标签文本</button>
            <br>
            <button onclick="setMonitorDatas()">加载监控列表</button>
            <button onclick="addMonitor()">添加监控</button>
            <button onclick="getMonitorDatas()">获取全部监控</button>
            <button onclick="setMonitorData()">修改选中的监控</button>
            <button onclick="deleteMonitorData()">删除选中的监控</button>
            <button onclick="unSelctMonitor()">取消选中的监控</button>


        </div>
    </div>

    <script type="module" src="/src/main.tsx"></script>
    <script>
        const global_license = "ghEqzfzRRslqq5cix4Fa9UxD2GxWulL/lI7ZPCYYtsRAFDUqPvxpUEMdi4Eac1dq"
        window.onload = () => {
            editor3D.setContainer(document.getElementById('editor3d'), global_license);
            //监听模型选中事件
            editor3D.addEventListener("modelSelect", e => {
                console.log("选中模型id", e.activeId);
            });

            //监听监控被选中的事件
            editor3D.addEventListener("monitorSelect", e => {
                console.log("选中监控id", e.activeMonitorId);
            });

            //监听楼层被选中的事件
            editor3D.addEventListener("floorSelect", e => {
                console.log("选中楼层id", e.activeFloorId);
            });

            //进入楼层的事件
            editor3D.addEventListener("inFloor", e => {
                console.log("进入楼层id", e.inFloorId);
            });


            // 初始相机位置
            editor3D.FlytoCamera({
                position: { "x": 89.794, "y": 64.892, "z": -23.839 },
                center: { "x": -2.596, "y": 0, "z": -96.056 },
                duration: 0 // 动画时间 0ms
            });

            //初始加载地面
            add_groundUrl();
        }
    </script>
    <script>
        const addBtn = document.getElementById("add");
        async function checklicense() {
            await editor3D.ck("/newmapserver/api/Permission/IsLegal?license=ghEqzfzRRslqq5cix4Fa9UxD2GxWulL/lI7ZPCYYtsRAFDUqPvxpUEMdi4Eac1dq")
                .then(res => {
                    console.log("res:" + JSON.stringify(res))
                })
        }
        // 添加地面模型
        function add_groundUrl() {
            editor3DStore.setGroundUrl("/data/dianzichang.glb");
            //await editor3D.setGroundUrl(global_license, "/data/厂房模型.glb");
        }

        //初始楼层数据
        function init_floor() {
            editor3DStore.setFloorDatas([
                {
                    id: "4620f1ae-9198-4009-af39-725f74b723ec",
                    name: "",
                    url: "/data/floorModal.glb",
                    positionX: 5.927381023584957,
                    positionY: 0.6765071153640747,
                    positionZ: 36.149002478323894,
                    heading: 0,
                    pitch: 0,
                    roll: 0
                },
                {
                    id: "8fca3010-b38e-4ad3-ba4c-b3be1d27e3e2",
                    name: "",
                    url: "/data/floorModal.glb",
                    positionX: 15.57338835293497,
                    positionY: 0.6765071153640747,
                    positionZ: 2.286006020036467,
                    heading: 0,
                    pitch: 0,
                    roll: 0
                }
            ]);
        }

        //选中楼层
        function select_floor() {
            const floorDates = editor3DStore.getFloorDatas();
            const floorDate = floorDates.pop();
            if (floorDate) {
                editor3DStore.setActiveFloorId(floorDate.id);
            }
        }

        // 取消选中的楼层
        function no_select_floor() {
            editor3DStore.setActiveFloorId("");
        }

        // 进入楼层(双击楼层模型)
        function in_floor() {
            const floorDates = editor3DStore.getFloorDatas();
            const floorDate = floorDates.pop();
            if (floorDate) {
                editor3DStore.setInFloorId(floorDate.id);
            }
        }

        // 取消进入楼层(双击楼层模型)
        function no_in_floor() {
            editor3DStore.setInFloorId("");
        }

        //添加楼层模型
        function add_floor(url) {
            editor3DStore.addFloor(url);
        }

        //移动楼层模型
        function move_floor() {
            const floorDates = editor3DStore.getFloorDatas();
            const floorDate = floorDates.pop();
            if (floorDate) {
                floorDate.positionX += 0.2;
                editor3DStore.setFloorDataById(floorDate.id, {
                    positionX: floorDate.positionX + 1
                });
            }
        }

        //删除选中楼层模型
        function del_active_floor() {
            editor3DStore.deleteFloorById(editor3DStore.activeFloorId);
        }

        //获取楼层数据
        function get_floor_data() {
            const floorDats = editor3DStore.getFloorDatas();
            console.log(JSON.stringify(floorDats));
        }

        //批量添加模型
        function addModelsDemo() {

            const datas = [];

            for (let i = 0; i < 15; i++) {
                for (let ii = 0; ii < 15; ii++) {
                    datas.push({
                        "id": Math.random(),
                        "name": "/data/chair.glb",
                        "url": "/data/chair.glb",
                        "positionX": i * 2,
                        "positionY": 1,
                        "positionZ": ii * 2,
                        heading: 0,
                        pitch: 0,
                        roll: 0,
                    });
                }
            }

            for (let i = 0; i < 15; i++) {
                for (let ii = 0; ii < 15; ii++) {
                    datas.push({
                        "id": Math.random(),
                        "name": "tree",
                        "url": "/data/5tree.glb",
                        "positionX": (i * 2) + 30,
                        "positionY": 0,
                        "positionZ": ii * 2,
                        heading: 0,
                        pitch: 0,
                        roll: 0,
                    });
                }
            }

            editor3DStore.setModelDatas(datas);
        }

        // 添加一个椅子
        function addChair() {
            editor3DStore.addModel("/data/chair.glb", "椅子\n椅子\n椅子\n椅子\n椅子\n椅子\n椅子\n椅子\n椅子\n椅子\n椅子\n椅子\n椅子");
        }
        // 添加一个桌子
        function addDesk() {
            editor3DStore.addModel("/data/desk.glb", "桌子\n桌子\n桌子\n桌子\n桌子\n桌子\n桌子\n桌子\n桌子\n桌子\n桌子\n桌子\n桌子");
        }
        //添加树
        function addTree() {
            editor3DStore.addModel("/data/1tree.glb", "树\n树\n树\n树\n树\n树\n树\n树\n树\n树\n树\n树\n树");
        }
        //添加告警标识
        function addAlarmModel() {
            editor3DStore.addModel("/data/yellow_triangle.glb", "告警标识\n告警标识\n告警标识\n告警标识\n告警标识\n告警标识");
        }
        // 球机
        function addCameraModel() {
            editor3DStore.addModel("/data/球机.glb", "球机\n球机\n球机\n球机\n球机\n球机\n球机\n球机\n球机\n球机\n球机");
        }
        //取消添加
        function cancelAdd() {
            editor3DStore.cancelAdd();
        }
        //获取全部模型数据
        function getModelDatas() {
            const ModelDate = editor3DStore.getModelDatas();
            console.log('ModelDate', ModelDate);
        }
        // 根据id获取模型数据
        function getModelDataById() {
            const ModelDates = editor3DStore.getModelDatas();
            const ModelDate = ModelDates.pop();
            if (ModelDate) {
                console.log('取到的数据', editor3DStore.getModelDataById(ModelDate.id));
            }
        }
        //更新模型位置
        function updateModelData() {
            const ModelDates = editor3DStore.getModelDatas();
            const ModelDate = ModelDates.pop();
            if (ModelDate) {
                ModelDate.positionX += 0.2;
                editor3DStore.setModelData(ModelDate);
            }
        }
        // 根据id删除配置数据
        function deleteModelById() {
            const ModelDates = editor3DStore.getModelDatas();
            const ModelDate = ModelDates.pop();
            if (ModelDate) {
                editor3DStore.deleteModelDate(ModelDate.id);
            }
        }
        //选中一个模型
        function selectModel() {
            const ModelDates = editor3DStore.getModelDatas();
            const ModelDate = ModelDates.pop();
            if (ModelDate) {
                editor3DStore.setActiveId(ModelDate.id);
            }
        }
        //取消选中
        function unselectModel() {
            editor3DStore.setActiveId("");
        }

        var cameraParam;

        // 保存相机参数
        function saveCameraParam() {
            cameraParam = editor3D.GetCurrentCamera();
            console.log("saveCameraParam:" + JSON.stringify(cameraParam))
        }

        // 设置相机参数
        function setCameraParam() {
            editor3D.FlytoCamera(cameraParam);
        }

        // 添加文本标签数据
        function addLabel() {
            editor3DStore.addLabel({
                id: String(Math.random()),  // id
                name: "文本标签标签", // 备用字段
                positionX: 0,  // x坐标
                positionY: 0,  // y坐标
                positionZ: 0,  // z坐标
                icon: "/data/Camera_gun_2.png", // 图标
                textContainer: "/data/TextContainer.png", // 标签文本
            });
        }
        function loadLabels() {
            editor3DStore.setLabelDatas([
                {
                    id: "1",  // id
                    name: "文本标签标签1", // 备用字段
                    positionX: 23.387709345340443,
                    positionY: 3.6765071153640747,
                    positionZ: -37.64782744365034,
                    icon: "/data/Camera_gun_2.png", // 图标
                    textContainer: "/data/TextContainer.png", // 标签文本
                },
                {
                    id: "2",  // id
                    name: "文本标签标签2", // 备用字段
                    positionX: 27.952260581425385,
                    positionY: 3.6765071153640747,

                    positionZ: -39.32743807342585,
                    icon: "/data/Camera_gun_2.png", // 图标
                    textContainer: "/data/TextContainer.png", // 标签文本
                }
            ]);
        }

        // 移动标签文本
        function moveLabel(id, positionY = 0) {
            if (id) {
                const labelData = editor3DStore.getLabelDataById(id);
                if (labelData) {
                    editor3DStore.setLabelDataById(id, {
                        positionY: labelData.positionY + positionY
                    });
                }
            }
        }

        //删除标签文本
        function deleteLabel() {

            // editor3DStore.deleteMonitorDataById();
        }

        //设置监控数据
        function setMonitorDatas() {
            editor3DStore.setMonitorDatas([
                {
                    id: "7b4e5f6c-a4ed-4d3e-afbc-266a9863ef98",
                    name: "监控1",
                    positionX: 23.387709345340443,
                    positionY: 2.6765071153640747,
                    positionZ: -37.64782744365034,
                    heading: 0,
                    pitch: 30,
                    roll: 0,
                    url: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
                },
                {
                    id: "f50ef289-cd64-4d76-8660-78bc3c483fd4",
                    name: "监控2",
                    positionX: 27.952260581425385,
                    positionY: 2.6765071153640747,
                    positionZ: -39.32743807342585,
                    heading: 0,
                    pitch: 0,
                    roll: 0,
                    url: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
                }
            ]);

        }


        //添加监控
        function addMonitor() {
            editor3DStore.addMonitor(url = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8");
        }
        //获取全部监控数据
        function getMonitorDatas() {
            console.log(editor3DStore.getMonitorDatas());
        }
        //移动选中的监控
        function setMonitorData() {
            const activeMonitorId = editor3DStore.activeMonitorId;
            const moitorData = editor3DStore.getMonitorDataById(activeMonitorId);
            if (moitorData) {
                moitorData.positionY += 1;
                editor3DStore.setMonitorDataById(activeMonitorId, moitorData);
            }
        }
        //删除选中的监控
        function deleteMonitorData() {
            const activeMonitorId = editor3DStore.activeMonitorId;
            editor3DStore.deleteMonitorDataById(activeMonitorId);
        }
        //取消选中的监控
        function unSelctMonitor() {
            editor3DStore.setActiveMonitorId();
        }


    </script>

    <script>
        //当前选中的标签文本id事件
        function selectLabelDatatId(e) {
            const labelData = editor3DStore.getLabelDataById(e.detail.lookLabelId);
            console.log('当前选中的标签文本', labelData);
        }
        //监听当前选中的标签文本id
        window.addEventListener("selectLabelDatatId", selectLabelDatatId);
    </script>

</body>
</html>